<template>
  <van-tabbar route :active-color="activeColor" :inactive-color="inactiveColor" class="tabber-wrapper" ref="tabberRef">
    <template v-for="(item, index) in tabberList" :key="item.tabName">
      <van-tabbar-item :icon="item.icon" replace :to="item.path">{{ item.tabName }}</van-tabbar-item>
    </template>
  </van-tabbar>
</template>
<script setup lang="ts">
import { computed,onMounted,ref } from "vue";
// 定义接口 要用大驼峰 以免变量命名冲突
interface TabList {
  icon: string;
  tabName: string;
	path: string
}
interface TabberProp {
	tabberList: Array<TabList>
}
const props = defineProps<TabberProp>();

const tabberList = computed(() => props.tabberList);
const activeColor = computed(() => props.activeColor);
const inactiveColor = computed(() => props.inactiveColor);
const tabberRef = ref(null)
onMounted(() => {
//	console.log('tabberRef',tabberRef.value)
	
})
// watchEffect(()=>{
// 		console.log('tabberRef',tabberRef.value)
// })
// defineExpose({
// 	tabberRef
// })
</script>
<style>
.tabber-wrapper{
	box-shadow: 0 -2px 7px rgba(0, 0, 0, 0.15);
}
</style>